import { ElFormType } from '@/global'
import { omit } from '@/utils/util'
import { PropType } from 'vue'
import {
  defineComponent,
  reactive,
  computed,
  // toRefs,
  watch,
  ref,
  Component
} from 'vue'
import { FormJson, FormJsonItem } from '.'
// import DatePicked from '../DatePicker/index'

type Form = Record<string, any>

export default defineComponent({
  name: 'BaseForm',
  props: {
    labelWidth: {
      type: String,
      default: '90px'
    },
    formJson: {
      required: true,
      type: Array as PropType<FormJson>,
      default: () => []
    },
    modelValue: {
      required: true,
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Array,
      default: () => []
    }
  },
  setup(props, { emit, attrs }) {
    console.log('props.modelValue', props.modelValue)
    // const { labelWidth, formJson, modelValue } = props // 不可这么写，会失去响应性
    const formRef = ref<ElFormType | null>(null)
    const state = reactive<{ form: Form }>({
      form: computed(() => props.modelValue)
    })
    watch(
      () => state.form,
      val => {
        emit('update:modelValue', val)
      },
      { deep: true }
    )

    const validate = () => {
      console.log(12312)
      return new Promise((resolve, reject) => {
        formRef.value
          ?.validate()
          .then(valid => {
            console.log('resolve', valid)
            resolve(valid)
          })
          .catch(err => {
            console.log('reject', err)
            reject(err)
          })
      })
    }

    return () => (
      <div>
        <el-form
          ref={formRef}
          label-suffix=":"
          model={state.form}
          label-width={props.labelWidth}
          {...attrs}
        >
          {props.formJson.map((item, index) => {
            const reset = omit(item, 'type', 'placeholder', 'other', 'options')
            return (
              <el-form-item key={index} {...reset} {...item.other}>
                {FormItemChildren(state.form, item)}
              </el-form-item>
            )
          })}
          <el-form-item>
            <el-button onClick={validate}>提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    )
  }
})

type FormItemChildrenFun = (form: Form, Item: FormJsonItem) => Component
const FormItemChildren: FormItemChildrenFun = (
  form,
  { type, prop, placeholder, options = [], ...reset }
) => {
  if (['input', 'textarea'].includes(type)) {
    return (
      <el-input
        type={type}
        v-model={form[prop]}
        placeholder={placeholder}
      ></el-input>
    )
  }
  if (type === 'select') {
    return (
      <el-select v-model={form[prop]} placeholder={placeholder}>
        {options.map((op: any) => (
          <el-option
            key={op.value}
            label={op.label}
            value={op.value}
          ></el-option>
        ))}
      </el-select>
    )
  }
  return (
    <el-input
      {...reset}
      type={'input'}
      v-model={form[prop]}
      placeholder={placeholder}
    ></el-input>
  )
}
